<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>当前的n值是：{{n}}</h2>
      <button @click="n++">点我n+1</button>

      <!--  条件渲染指令 v-show || v-if  v-else-if  v-else
        都是用于做判断显示 判断的是都是boolean类型的值
    -->
      <!-- v-show -->
      <h2 v-show="false">你好</h2>
      <h2 v-show="5 == 5">你不好</h2>

      <!-- v-if -->
      <h2 v-if="false">你好</h2>
      <h2 v-if="1 == 1">你不好</h2>

      <!-- v-show -->
      <!-- <div v-show="n === 1">java</div>
    <div  v-show="n === 2">html</div>
    <div  v-show="n === 3">css</div> -->

      <!-- v-else-if -->
      <div v-if="n === 1">java</div>
      <div v-else-if="n === 2">html</div>
      <div v-else-if="n === 3">css</div>
      <div v-else>哈哈哈</div>

      <!-- 使用父元素包裹 -->
      <!-- <div v-if="n === 1">
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
      </div> -->

      <!-- v-show不支持template -->
      <template v-if="n === 1">
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
        <div>这里是内容</div>
      </template>
    </div>
  </body>
</html>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        n: 0,
      };
    },
  });
</script>

<!-- 
    条件渲染：
    v-if:写法和if else语句类似
    v-if="表达式"
    v-else-if="表达式"
    v-else
   不展示的DOM元素会被直接移除，适用于切换频率较低的场景 顺序结构不可乱


    v-show:
    不展示的DOM匀速使用display:none隐藏
    适合一些频繁切换的场景


 -->
